<template>
   <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>货单管理</el-breadcrumb-item>
      <el-breadcrumb-item>出货管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 用户列表区域 -->
      <el-table :data="userList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="出货单号" prop="did"></el-table-column>
        <el-table-column label="订单详情单号" prop="orderdetailid"></el-table-column>
        <el-table-column label="订单号" prop="orderid"></el-table-column>
        <el-table-column label="发货时间" prop="starttime"></el-table-column>
        <el-table-column label="订单状态" prop="status">
            <template scope="scope">  
                    <el-tag type="danger" v-if="scope.row.status=='1'" size="mini">待处理</el-tag>
                    <el-tag type="warning" v-if="scope.row.status=='2'" size="mini">正在发货</el-tag>
                    <el-tag type="info" v-if="scope.row.status=='3'" size="mini">已收货</el-tag>                               
                </template>
        </el-table-column>

      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
      :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" 
      layout="total, sizes, prev, pager, next, jumper" :total="totalnum">
      </el-pagination>
    </el-card>
   </div>
</template>

<script>
export default {
    data() {
        return {
          // 获取用户列表的参数对象
          queryInfo: {
            // 当前的页数
            pagenum: 1,
            // 当前每页显示多少条数据
            pagesize: 5
          },
          userList: [],
          totalnum: 4
      }       
    },
    created() {
      this.getUserList()
    },
    methods: {
        async getUserList() {
          //const {data: res} = await this.$http.get('sysservice/user/pageUser/'+num+'/'+size+'')
          const {data: res} = await this.$http.get('sysservice/deliveryorder/findAll', {
          params: this.queryInfo
          })
          if(res.code!=2000) {return this.$message.error('获取用户列表失败！')}
          this.userList = res.data.rows
          this.totalnum = res.data.total
        },
        // 监听 pagesize 改变的事件
        handleSizeChange(newSize) {
          //console.log(newSize)
          this.queryInfo.pagesize = newSize
          this.getUserList()
        },
        // 监听 页码值 改变的事件
        handleCurrentChange(newPage) {
          console.log(newPage)
          this.queryInfo.pagenum = newPage
          this.getUserList()
        }     
      
     
  }
}
</script>

<style lang="less" scoped>

</style>
